<template>
  <el-tabs
      v-model="store.bbc"
      type="card"
      class="demo-tabs"
      closable
      @tab-remove="store.kk"
      @tab-click="jj">
    <!--    @tab-click="jj"-->
    <el-tab-pane
        v-for="item in ff"
        :key="item.id"
        :label="item.name"
        :name="item.path"
    >
      <router-view :name="item.path" v-slot="{Component}">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
      </router-view>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {useUserStore} from '@/pinia/modules/user'
import {useRouter} from "vue-router";
const store = useUserStore();
const router = useRouter();
onMounted(() => {
  // store.bbc = router.currentRoute._value.fullPath;
})

const fv = store.bbc;

const jj = (e) => {
  // router.replace(e.props.name)
  console.log(e)
}
const hh = (ee) => {
  console.log(ee)
}
let tabIndex = 2
const editableTabsValue = ref(store.zx.length)
const ff = store.zx;
const gg = (e) => {
  ff.forEach(item => {
    if (item.path == e) {
      ff.splice(item,1)
    }
  })
}
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>